<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item><a href="/users">用户列表</a></el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 搜索与添加区域 -->
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容"
                     v-model="queryInfo.query" clearable @clear="getUserList">
						<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
				</el-col>
			</el-row>

			<!-- 用戶列表區域 -->
			<el-table :data="userlist" border stripe>
				<el-table-column type="index"></el-table-column>
				<el-table-column label="姓名" prop="username"></el-table-column>
				<el-table-column label="郵箱" prop="email"></el-table-column>
				<el-table-column label="電話" prop="mobile"></el-table-column>
				<el-table-column label="角色" prop="role_name"></el-table-column>
				<el-table-column label="狀態">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="190px">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
						<el-tooltip
							effect="dark"
							content="分配角色"
							placement="top"
							:enterable="false">
							<el-button
								type="warning"
								icon="el-icon-setting"
								size="mini"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
            <!-- 分頁區域 -->
             <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
		</el-card>
        <!-- 添加用户的对话框 -->
        <el-dialog
        title="提示"
        :visible.sync="addDialogVisible"
        width="50%" @close="addDialogClosed">
        <!-- 主体区域 -->
        <el-form :model="addForm" status-icon :rules="addFormRules" ref="addFormRef"
         label-width="100px">
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="addForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="addForm.password" autocomplete="off"></el-input>
            </el-form-item>
           <el-form-item label="邮箱" prop="email">
                <el-input type="text" v-model="addForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input type="text" v-model="addForm.mobile" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>
        </span>
        </el-dialog>
          <!-- 编辑用户的对话框 -->
        <el-dialog
        title="提示"
        :visible.sync="editDialogVisible"
        width="50%" @close="editDialogClosed">
        <!-- 主体区域 -->
        <el-form :model="editForm" status-icon :rules="editFormRules" ref="editFormRef"
         label-width="100px">
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="editForm.username" autocomplete="off" disabled></el-input>
            </el-form-item>
           <el-form-item label="邮箱" prop="email">
                <el-input type="text" v-model="editForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input type="text" v-model="editForm.mobile" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUser()">确 定</el-button>
        </span>
        </el-dialog>
	</div>
</template>

<script>
export default {
	data() {
        //验证邮箱的规则
        var checkEmail = (rule,value,cb) => {
            const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
            if(regEmail.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的邮箱'))
        }
        // 验证手机号的规则
        var checkMobile = (rule,value,cb) => {
            const regMobile = /^(0|86|17951)?(13[0-9]|15(0123456789)|17[678]|18[0-9]|14[57])[0-9]{8}$/
            if(regMobile.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的手机号'))
        }

		return {
            // 获取用户列表的参数对象
			queryInfo: {
                query: '',
                // 当前的页数
                pagenum: 1,
                // 当前每页显示多少条数据
				pagesize: 2,
			},
			userlist: [],
            total: 0,
            // 控制添加用户对话框的显示与隐藏
            addDialogVisible: false,
            // 添加用户的表单数据
            addForm:{
                username:'',
                password:'',
                email:'',
                mobile:''
            },
            //添加表单的验证规则对象
            addFormRules:{
                username:[
                        {required:true, message:'请输入用户名', trigger:'blur'},
                        {min:6, max:20, message:'用户名的长度在6~20个字符之间', trigger:'blur'}
                    ],
                password:[
                    {required:true, message:'请输入密码', trigger:'blur'},
                    {min:6, max:20, message:'密码的长度在6~20个字符之间', trigger:'blur'}
                ],
                email:[
                    {required:true, message:'请输入邮箱', trigger:'blur'},
                    {validator: checkEmail, trigger: 'blur' }
                ],
                mobile:[
                    {required:true, message:'请输入手机号', trigger:'blur'},
                    {validator: checkMobile, trigger: 'blur' }
                ],
            },
            // 控制编辑用户对话框的显示与隐藏
            editDialogVisible: false,
            // 编辑用户的表单数据
            editForm:{
                username:'',
                email:'',
                mobile:''
            },
            //添加表单的验证规则对象
            editFormRules:{
                email:[
                    {required:true, message:'请输入邮箱', trigger:'blur'},
                    {validator: checkEmail, trigger: 'blur' }
                ],
                mobile:[
                    {required:true, message:'请输入手机号', trigger:'blur'},
                    {validator: checkMobile, trigger: 'blur' }
                ],
            }
		}
	},
	created() {
		this.getUserList()
	},
	methods: {
		async getUserList() {
			const { data: res } = await this.$http.get('/vip/ausers/get', {
				params: this.queryInfo,
			})
			if (res.meta.status !== 200) {
				return this.$message.error('獲取用戶列表失敗!')
			}
			this.userlist = res.data.users
			this.total = res.data.total
			//console.log(res)
        },
        // 監聽pagesize改變的事件
        handleSizeChange(newSize){
            //console.log(newSize)
            this.queryInfo.pagesize = newSize
            this.getUserList()
        },
        // 監聽 頁面值 改變
        handleCurrentChange(newPage){
            this.queryInfo.pagenum = newPage
            this.getUserList()
        },
        // 監聽 switch 開關的
        async userStateChanged(row){
            const { data: res } = 
            await this.$http.put(`/vip/ausers/${row.id}/state/${row.mg_state}`)
            if (res.meta.status !== 200) {
                row.mg_state = !row.mg_state
                return this.$message.error('更新状态失敗!')
            }
        },
        // 监听添加用户对话框的关闭事件
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()
        },
        addUser(){
            this.$refs.addFormRef.validate(async valid => {
                if(!valid) return

                const {data: res} = await this.$http.post("/vip/ausers/save",this.addForm)

                if(res.meta.status !== 200){
                    return this.$message.error('添加用户失败！')
                }else{
                    this.$message.success('添加用户成功！')
                    this.addDialogVisible = false
                    this.getUserList()
                }
            })
        },
        async showEditDialog(id){
             const {data: res} = await this.$http.get("/vip/ausers/"+id)

                if(res.meta.status !== 200){
                    return this.$message.error('查询用户失败！')
                }else{
                    // this.$message.success('添加用户成功！')
                    this.editForm = res.data
                    this.editDialogVisible = true
                }
        },
          // 监听添加用户对话框的关闭事件
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()
        },
        editUser(){
            this.$refs.editFormRef.validate(async valid => {
                if(!valid) return

                const {data: res} = await this.$http.post("/vip/ausers/edit",this.editForm)

                if(res.meta.status !== 200){
                    return this.$message.error('编辑用户失败！')
                }else{
                    this.$message.success('编辑用户成功！')
                    this.editDialogVisible = false
                    this.getUserList()
                }
            })
        },
        async removeUserById(id) {
            
           const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                // }).then(() => {
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
                // }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });      
               }).catch(err => err)    
            //});
            if(confirmResult !== "confirm"){
                return this.$message.info("已取消删除")
            } else{
                const {data: res} = await this.$http.delete("/vip/ausers/"+id)

                if(res.meta.status !== 200){
                    return this.$message.error('删除用户失败！')
                }else{
                    this.$message.success('删除用户成功！')
                    this.getUserList()
                }
            }
            
        }
	},
}
</script>

<style lang="less" scoped>
</style>